<template>
	<view class="referee-code-page">
		<view class="header">
			<text class="title">填写邀请人ID</text>
		</view>
		
		<view class="input-group">
			<input type="number" v-model="code" placeholder="请输入推荐人ID" class="input" />
			<view class="input-group-fixed">
				<uni-icons class="clear-icon" v-show="code" @click="code = ''" type="closeempty" size="20"></uni-icons>
				<view class="confirm-btn xjs-btn-primary" :class="{ disabled: !code }" @tap="handleConfirm">确定</view>
			</view>
		</view>
		<text class="tip-text">输入后，直接点击【确定】可查看对应邀请人信息</text>
		<template v-if="bankSwitch">
			<view class="referee-info" v-if="refereeInfo">
				<view class="info-label">邀请人来自"{{ refereeInfo.studioName }}"</view>
				<view class="info-card">
					<image class="avatar" :src="refereeInfo.avatar" mode="aspectFill" />
					<view class="info">
						<view class="name xjs-line-one">{{ refereeInfo.nickName }}</view>
						<view class="id">ID {{ refereeInfo.id }}</view>
					</view>
				</view>
			</view>
		</template>
		<button @click="submit" class="submit-btn xjs-btn-primary" :class="{ disabled: !refereeInfo }">确认邀请人</button>
		<view v-if="!bankSwitch" @click="jump" class="xjs-text-center xjs-size-28 xjs-mt-40">跳过</view>

		<!-- 使用 uni-popup -->
		<uni-popup ref="popup" type="center" background-color="#fff" border-radius="32rpx 32rpx 32rpx 32rpx"
			:mask-click="false">
			<view class="popup-content">
				<view class="popup-title">请确认你的邀请人</view>
				<view class="popup-info">
					<text class="info-label">邀请人来自"{{ refereeInfo.studioName }}"</text>
					<view class="info-card">
						<image class="avatar" :src="refereeInfo.avatar" mode="aspectFill" />
						<view class="info">
							<view class="name xjs-line-one">{{ refereeInfo.nickName }}</view>
							<view class="id">ID {{ refereeInfo.id }}</view>
						</view>
					</view>
				</view>
				<view class="popup-btns">
					<view class="btn-flex xjs-btn-primary-plain" @tap="closePopup">错了，重新填写</view>
					<view class="btn-flex xjs-btn-primary" @tap="handleSubmit">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import { useLogin, useLoginWx,useLoginApp } from '@/hooks/useLogin'
	import { useUserStoreToRefs } from '@/store/useUserStore'
	import api from '@/api'
	import config from '@/config'
	
	import { useConfigStoreToRefs } from '@/store/useConfigStore'
	const { bankSwitch } = useConfigStoreToRefs()
	
	const { shareRefereeId } = useUserStoreToRefs()
	const code = ref('');
	const refereeInfo : any = ref('');
	const popup = ref(null);
	const params : any = ref({});
	onLoad((data) => {
		params.value = data;
		code.value = shareRefereeId.value || ''
	});
	const jump = async ()=>{
		// 审核期间跳过给个默认推荐人code并注册
		const res : any = await api({
			method: 'get',
			url: `/mall/user/inviter/${config.examineUserId}`
		});
		if (!res.data) {
			uni.showToast({
				icon: 'none',
				title: '推荐人不存在，请重新输入'
			});
			return;
		}
		refereeInfo.value = res.data;
		console.log(refereeInfo.value)
		handleSubmit()
	}
	const handleConfirm = async () => {
		if (!code.value) return;
		// API调用
		const res : any = await api({
			method: 'get',
			url: `/mall/user/inviter/${code.value}`
		});
		if (!res.data) {
			uni.showToast({
				icon: 'none',
				title: '推荐人不存在，请重新输入'
			});
			return;
		}
		refereeInfo.value = res.data;
	};
	const submit = () => {
		if (!refereeInfo.value) return;
		// （0-陪宠师 1-店长 2-普通用户）
		if (refereeInfo.value.identity == 2) {
			uni.showToast({
				icon: 'none',
				title: '此用户无推荐权限，请重新输入'
			});
			return;
		}
		popup.value.open();
	};
	const closePopup = () => {
		popup.value.close();
	};
	const handleSubmit = async () => {
		//微信小程序一键登录
		if (params.value.onClickLogin) {
			useLoginWx({
				phone: params.value.phone,
				userId: '',
				refereeId: refereeInfo.value.id,
				step: 3
			});
			return
		}
		if (params.value.onClickLoginApp) {
			useLoginApp({
				phone: params.value.phone,
				userId: '',
				refereeId: refereeInfo.value.id,
				step: 3
			});
			return
		}
		// TODO: 处理确认逻辑 - 手机号验证码注册
		const res : any = await api({
			method: 'post',
			url: `/mall/user/v2/register-login/v2`,
			data: {
				code: params.value.verifyCode,
				mobile: params.value.phone,
				refereeId: refereeInfo.value.id,
				countryCode: params.value.areaCode,
				openId: '',
				origin: 0,
				userId: '',
				// 注册方式：0-第一次登录注册，1-切换账号时选择新手机号注册，2-切换账号时选择当前手机号再注册账号
				registerWay: params.value.registerWay
			}
		});
		if (res.code == 1) {
			uni.showToast({
				icon: 'none',
				title: res.msg
			});
			return;
		}
		if (res.code == 0) {
			useLogin({
				mobile: params.value.phone,
				code: params.value.verifyCode,
				countryCode: params.value.areaCode,
				userId: res.data[0].id,
				step: 4
			}, () => {
				uni.navigateTo({
					url: `/pages/login/settingPassword?phone=${params.value.phone}&areaCode=${params.value.areaCode}&userId=${res.data[0].id}&register=register`
				})
			})
			closePopup();
		}

	};
</script>

<style lang="scss" scoped>
	.referee-code-page {
		min-height: 100vh;
		background-color: #fff;
		padding: 0 48rpx;
		box-sizing: border-box;

		.header {
			text-align: center;
			padding: 120rpx 0;

			.title {
				font-size: 48rpx;
				font-weight: bold;
				color: #333;
			}
		}
		.tip-text {
			font-size: 24rpx;
			color: #999;
			padding-left: 12rpx;
			margin-bottom: 40rpx;
		}

		.referee-info {
			background-color: #f5f6f7;
			padding: 40rpx 32rpx;
			border-radius: 24rpx;
			margin-top: 80rpx;

			.info-label {
				font-size: 26rpx;
				color: #1b2120;
				margin-bottom: 16rpx;
				border-bottom: 1rpx solid #e4e6e6;
				padding-bottom: 6rpx;
			}

			.info-card {
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				padding-top: 40rpx;

				.avatar {
					width: 96rpx;
					height: 96rpx;
					border-radius: 50%;
					margin-right: 16rpx;
					flex-shrink: 0;
				}

				.info {
					width: calc(100% - 130rpx);

					.name {
						font-size: 32rpx;
						color: #333;
						margin-bottom: 4rpx;
						font-weight: bold;
					}

					.id {
						font-size: 26rpx;
						color: #7c807f;
					}
				}
			}
		}

		.submit-btn {
			margin-top: 60rpx;

			&.disabled {
				opacity: 0.5 !important;
				pointer-events: none;
			}
		}

		.popup-content {
			width: 600rpx;
			padding: 48rpx 32rpx;
			box-sizing: border-box;
			border-radius: 24rpx;
			overflow: hidden;

			.popup-title {
				font-size: 32rpx;
				color: #333;
				text-align: center;
				font-weight: bold;
				margin-bottom: 48rpx;
			}

			.popup-info {
				background-color: #f5f6f7;
				padding: 32rpx;
				border-radius: 16rpx;
				margin-bottom: 48rpx;

				.info-label {
					font-size: 26rpx;
					color: #1b2120;
					margin-bottom: 16rpx;
					display: block;
					border-bottom: 1rpx solid #e4e6e6;
					padding-bottom: 6rpx;
				}

				.info-card {
					display: flex;
					align-items: center;
					padding-top: 32rpx;

					.avatar {
						width: 96rpx;
						height: 96rpx;
						border-radius: 50%;
						margin-right: 16rpx;
						flex-shrink: 0;
					}

					.info {
						flex: 1;

						.name {
							width: 350rpx;
							font-size: 32rpx;
							color: #333;
							margin-bottom: 4rpx;
							font-weight: bold;
						}

						.id {
							font-size: 26rpx;
							color: #7c807f;
						}
					}
				}
			}

			.popup-btns {
				display: flex;
				justify-content: space-between;
				gap: 24rpx;
				.btn-flex{
					flex: 1;
				}
			}
		}
	}
</style>